<template>
	<v-tabs-page v-model:value="activeTab" :items="tabs" active-color="#FF5722">
		<!-- 自定义内容插槽 -->
		<template #content-0>
			<view class="custom-content" style="background: #ffe0b2">
				<text>自定义内容 1</text>
			</view>
		</template>

		<template #content-1>
			<view class="custom-content" style="background: #c8e6c9">
				<text>自定义内容 2</text>
			</view>
		</template>
	</v-tabs-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activeTab = ref(1);
const tabs = ref([
	{ title: '推荐', content: '...' },
	{ title: '首页', content: '...' },
	{ title: '关注', content: '...' },
	{ title: '热门', content: '...' },
	{ title: '穿搭', content: '...' },
	{ title: '情感', content: '...' },
	{ title: '影视', content: '...' },
	{ title: '美食', content: '...' }
]);
</script>

<style>
.custom-content {
	padding: 40rpx;
	min-height: 600rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 48rpx;
}
</style>
